<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>1: Parallax Intro</title>

    <link href='https://fonts.useso.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

 <!--    <link rel="stylesheet" href="assets/header.css">
 -->
    <style>

        /*  Page styles  */

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font: normal 14px/1.4 Arial, Helvetica, sans-serif;
        }

        .skrollr-desktop body {
            height:100% !important;
        }

        #skrollr-body {
            height:100%;
            overflow:visible;
            position:relative;
        }


        /*  Styles for this example */

        .parallax-image.skrollable-between {
            display:block;
        }

        .no-skrollr .parallax-image-wrapper {
            display:none !important;
        }

        .parallax-image-wrapper {
            position:fixed;
            left:0;
            width:100%;
            overflow:hidden;

            height:80vh;
            top:-80vh;
        }


        .parallax-image {
            display:none;
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;

            height:100vh;
            top:0;
        }


        .parallax-image.skrollable-between {
            display:block;
        }

        .no-skrollr .parallax-image-wrapper {
            display:none !important;
        }

        .gap {
            background:transparent center no-repeat;
            background-size:cover;
            height:80vh;
        }

        .skrollr .gap {
            background:transparent !important;
        }

        #page-intro h1{
            text-align: center;
            color: #fff;
            font: normal 60px 'Droid Serif', sans-serif;
            padding-top: 24vh;
        }

        @media (max-width: 800px) {
            #page-intro h1 {
                font-size: 42px;
                padding-top: 15vh;
            }
        }

        #page-intro .btn{
            color: #fff !important;
            display: block;
            margin: 40px auto;
            width: 200px;
            text-align: center;
            border: 1px solid #fff;
            padding: 18px 20px;
            border-radius: 4px;
            text-transform: uppercase;
            font-weight: bold;
            text-decoration: none;
        }

        .dummy-content{
            padding: 150px 0;
            background-color: #fff;
            color: #221f51;
            font-size: 24px;
            min-height: 800px;
            text-align: center;
        }

        .dummy-content h2{
            font-weight: normal;
            color: #777;
        }

    </style>
</head>
<body>

<div
        class="parallax-image-wrapper"
        data-anchor-target="#page-intro"
        data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">

    <div
            class="parallax-image"
            style="background-image:url(assets/images/coast.jpg)"
            data-anchor-target="#page-intro"
            data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"
            >

    </div>
</div>

<div id="skrollr-body">

    <div id="page-intro" class="gap" style="background-image:url(assets/images/coast.jpg); ">
        <h1>使用6种不同视觉差特效的HTML5页面设计效果</h1>
    </div>


    <div class="dummy-content">

        <h2>Scroll to see the effect!</h2>

    </div>

</div>

<script src="assets/skrollr.min.js"></script>

<script>
    skrollr.init();
</script>

</body>
</html>